@use "../variables" as *;

.svc-carry-forward-panel-wrapper {
  width: 100%;
  container-type: inline-size;
}
.svc-carry-forward-panel {
  @include ctrDefaultFont;
  box-sizing: border-box;
  width: 100%;
  padding: var(--ctr-survey-info-panel-padding-top, var(--lbr-spacing-x4))
    var(--ctr-survey-info-panel-padding-right, var(--lbr-spacing-x8))
    var(--ctr-survey-info-panel-padding-bottom, var(--lbr-spacing-x4))
    var(--ctr-survey-info-panel-padding-left, var(--lbr-spacing-x8));
  border-radius: var(--ctr-survey-info-panel-corner-radius, var(--lbr-corner-radius-x1));
  background: var(--ctr-survey-info-panel-background-color, var(--sjs-layer-2-background-500, #f8f8f8ff));
  text-align: center;
  color: var(--ctr-survey-info-panel-text-color, var(--sjs-layer-2-foreground-50, #00000080));
}
  
@container (max-width: #{$sd-panel-medium-min-width}) {
    .svc-carry-forward-panel {
      display: none;
    }
  }
  
@container (max-width: #{$sd-panel-normal-min-width}) {
    .svc-carry-forward-panel {
      padding: calcSize(4) calcSize(3);
    }
}
.svc-carry-forward-panel__link {
  .svc-action-button {
    padding: 0;
    border: none;
    font-weight: inherit;
    color: inherit;
    text-decoration: underline;
    cursor: pointer;
    &:hover,
    &:focus {
      background-color: transparent;
    }
  }
}